<div class="layui-card">
	<div class="layui-card-header">
		<h2 class="header-title">分类列表</h2>
		<span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>分类列表</cite></a>
        </span>
	</div>
	<div class="layui-card-body">
		<div class="layui-form toolbar">
			搜索：<input id="classify-edit-search" class="layui-input search-input" type="text" placeholder="输入关键字" />&emsp;
			<button id="classify-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
			<button id="classify-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button> &emsp;
			<div style="width: 180px;display: inline-block;">
				<select name="aa" xm-select="aa">
					<option value="a">aaaa</option>
					<option value="b">bbbb</option>
					<option value="c">cccc</option>
					<option value="d">ddddd</option>
				</select>
			</div>
		</div>

		<!-- 数据表格 -->
		<table class="layui-table" id="classify-table" lay-filter="classify-table"></table>
	</div>
</div>

<script type="text/html" id="classify-model">
	<form id="classify-form" lay-filter="classify-form" class="layui-form model-form">
		<input name="order" type="hidden" value="0" />
		<input name="show" type="hidden" value="1" />
		<input name="classifyId" type="hidden" value="1" />
		<div class="layui-form-item">
			<label class="layui-form-label">分类名</label>
			<div class="layui-input-block">
				<input name="classifyName" placeholder="分类名" type="text" class="layui-input" maxlength="20" lay-verify="required" required/>
			</div>
		</div>
		<!--<div class="layui-form-item">
			<label class="layui-form-label">显示</label>
			<div class="layui-input-block">
				<input type="checkbox" name="show" lay-skin="switch" lay-text="ON|OFF">
			</div>
		</div>-->
		<div class="layui-form-item model-form-footer">
			<button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
			<button class="layui-btn" lay-filter="classify-form-submit" lay-submit>保存</button>
		</div>
	</form>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="classify-table-bar">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="short">排序</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
	layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects'], function() {
		var form = layui.form;
		var table = layui.table;
		var config = layui.config;
		var layer = layui.layer;
		var util = layui.util;
		var admin = layui.admin;
		var formSelects = layui.formSelects;
		showC()
		//渲染表格
		function showMat(sj) {
			table.render({
				elem: '#classify-table',
				page: true,
				data: sj,
				cols: [
					[{
							field: 'classifyId',
							title: 'ID'
						},
						{
							field: 'classifyName',
							title: '分类名'
						},
						{
							field: 'sums',
							title: '文章数量'
						}, {
							align: 'center',
							toolbar: '#classify-table-bar',
							title: '操作'
						}
					]
				]
			});
		}

		function showC() {
			$.ajax({
				type: "POST",
				url: getClassifys,
				data: {
					params: JSON.stringify({
						pageSize: 1000,
						pageNumber: 1,
					})
				},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				beforeSend: function(request) {},
				success: function(data) {
					console.log(data)
					showMat(data.rows)
				},
				beforeSend: function() {},
				complete: function() {},

				error: function(result) {
					console.log(result);
				}
			});
		}

		$('#classify-btn-add').click(function() {
			showEditModel();
		});

		form.on('submit(classify-form-submit)', function(datas) {
			console.log(datas)
			var hhh = $(".zbyclas .layui-layer-title").text();
			var data = ""
			if(hhh == "添加分类") {
				data = {
					order: 0,
					show: "1",
					classifyName: datas.field.classifyName,
					level: 0
				}
				aandu(addClassifys, data);
			} else if(hhh == "修改分类") {
				data = {
					classifyName: datas.field.classifyName,
					classifyId:parseInt(datas.field.classifyId)
				}
				aandu(updateClassifys, data);
			}

			return false;
		});

		function aandu(path, datas) {
			$.ajax({
				type: "POST",
				url: path,
				data: {
					params: JSON.stringify(datas)
				},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				success: function(data) {
					console.log(data)
					if(data.code == 0) {
						layer.closeAll();
						layer.msg(data.msg, {
							icon: 1
						});
						showC()
					} else {
						layer.msg(data.msg, {
							icon: 2
						});
					}
				},
				complete: function() {},
				error: function(result) {
					console.log(result);
				},
			});
		}

		// 工具条点击事件
		table.on('tool(classify-table)', function(obj) {
			var data = obj.data;
			if(obj.event === 'edit') { //修改
				showEditModel(data);
			} else if(obj.event === 'del') { //删除
				doDelete(obj);
			}
		});

		// 搜索按钮点击事件
		$('#classify-btn-search').click(function() {
			var keyword = $('#classify-edit-search').val();
			table.reload('classify-table', {
				where: {
					keyword: keyword
				}
			});
		});

		// 显示编辑弹窗
		var showEditModel = function(data) {
			layer.open({
				type: 1,
				title: data ? '修改分类' : '添加分类',
				area: '450px',
				offset: '120px',
				skin: 'zbyclas',
				content: $('#classify-model').html(),
				success: function() {
					$('#classify-form')[0].reset();
					$('#classify-form').attr('method', 'GET');
					if(data) {
						form.val('classify-form', data);
						$('#classify-form').attr('method', 'GET');
					}
				}
			});
		};

		// 删除
		var doDelete = function(obj) {
			layer.confirm('确定要删除吗？', function(i) {
				layer.close(i);
				layer.load(2);
				$.ajax({
					type: "POST",
					url: delClassifys,
					data: {
						classifyId: obj.data.classifyId
					},
					dataType: "json",
					xhrFields: {
						withCredentials: true
					},
					success: function(data) {
						console.log(data);
						if(data.code == 0) {
							layer.closeAll();
							layer.msg(data.msg, {
								icon: 1
							});
							showC()
						} else {
							layer.msg(data.msg, {
								icon: 2
							});
						}
					},
					error: function(result) {
						console.log(result);
					},
				});
			});
		};

	});
</script>